<template>
  <div>
    <h1>过滤器的应用</h1>
    <table width="1000px" border="1">
        <tr>
            <th>序号</th>
            <th>姓名</th>
            <th>性别</th>
            <th>年龄</th>
            <th>出生日期</th>
            <th>操作</th>
        </tr>
        <tr v-for="(item,index) in stu" :key="index">
            <td>{{ index + 1}}</td>
            <td>{{ item.name }}</td>
            <td>{{ item.sex }}</td>
            <td>{{ item.age }}</td>
            <!-- 时间戳，可以不用破坏原数据 -->
            <td>{{ item.date |  fromDate}}</td>
            <td>
                <a href="javascript:;">删除</a>
            </td>
        </tr>
    </table>
  </div>
</template>
<script>
export default {
  data() {
    return {
      stu: [
        {
          name: "于海滨",
          age: 75,
          sex: "女",
          date: 15596139111,
        },
        {
          name: "郑致和",
          age: 27,
          sex: "男",
          date: 26596639111,
        },
        {
          name: "黄伟伟",
          age: 19,
          sex: "女",
          date: 1659948268000,
        },
      ],
    };
  },
  filters: {
    fromDate(val) {
      // 将时间戳改转为事件对象
      let date = new Date(val);
      // 将时间对象转为年月日时分秒
      // 获取年
      let yy = date.getFullYear();
      // 月份0-11 所以+1
      let mm = date.getMonth() + 1;
      mm = mm < 10 ? "0" + mm : mm;
      // 获取日
      let dd = date.getDate();
      dd = dd < 10 ? "0" + dd : dd;
      // 获取时分秒
      let hh = date.getHours();
      hh = hh < 10 ? "0" + hh : hh;
      let sm = date.getMinutes();
      sm = sm < 10 ? "0" + sm : sm;
      let ss = date.getSeconds();
      ss = ss < 10 ? "0" + ss : ss
      // 将年月日时分秒返回出去
      return `${yy}-${mm}-${dd} ${hh}:${sm}:${ss}`
    },
  },
};
</script>